<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <table id="box" border="1" cellspacing="0" cellpadding="5">
            <!-- 表格内容将通过 JavaScript 动态生成 -->
        </table>
    </div>
</body>
<script>
    var arr = [
        { name: "zxy", age: 20, score: 89 },
        { name: "xhx", age: 21, score: 90 },
        { name: "xt", age: 23, score: 88 }
    ];

    var color = ['red', 'green', 'pink'];
    var str = `<tr>
                <th>名字</th>
                <th>年龄</th>
                <th>成绩</th>
               </tr>`; // 添加表头

    for (var i = 0; i < arr.length; i++) {
        str += `<tr style='background:${color[i]}'>
                <td>${arr[i].name}</td>
                <td>${arr[i].age}</td>
                <td>${arr[i].score}</td>
              </tr>`;
    }

    document.getElementById("box").innerHTML = str; // 将表头和内容一起插入
</script>

</html>